<script setup lang="ts">
import List from './list.layout.vue'

type PropsState = {
  to?: string
}
withDefaults(defineProps<PropsState>(), {
  to: ''
})
const emit = defineEmits(['lsClose'])
const state = reactive({
  show: false
})
const user = ref({})
const open = (e: any) => {
  user.value = e
  state.show = true
}
const closeChange = () => {
  state.show = false
  emit('lsClose')
}
const show = () => {
  state.show = true
}
defineExpose({
  open,
  show
})
</script>

<template>
  <n-drawer
    v-model:show="state.show"
    height="80vh"
    style="--n-color: #f9f9f9"
    resizable
    placement="bottom"
    :to="to"
  >
    <n-drawer-content
      :body-content-style="{ padding: '20px 0 0 0' }"
      closable
      :title="user.username"
    >
      <list :author_id="user.id" @close="closeChange" />
    </n-drawer-content>
  </n-drawer>
</template>

<style lang="scss">
.n-drawer {
  position: fixed;
}
</style>
